﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
 
        <script>
                //pc轮播图
                 //左右按钮是隐藏的。鼠标进入盒子，左右按钮显示；鼠标离开盒子，左右按钮隐藏。
                //小圆点个数是和图片数量一致的。有多少张图片，就有多少个小圆点。所以为了后期更好维护，这里的小圆点用添加元素的方式实现，而不是直接手动在ul里面放小圆点。
                //点击小圆点，图片移动。 图片移动，就需要用到animate动画效果。
                //点击左右按钮，图片移动。当图片显示到最后一张，点击右侧按钮， 当图片显示到第一张，点击左侧按钮，把一张图片显示出来
            //图片移动，小圆点跟着动。
            //这里图片、小圆点和按钮，有一方动起来，其他两方都是跟着动的，所以这里需要对三方进行绑定。


                //轮播图
                //先整合数据把图片添加在页面上
                //本质就是ul跟随手指移动，简单说就是移动端的拖动元素功能
                //触摸元素：touchstart：获取手指初始坐标
                // 移动手指touchmove：计算手指的滑动距离，并且移动盒子
                // 离开手指touchend：根据滑动的距离分不同的情况
                // 如果移动距离小于某个像素，就回弹到原来的位置
                // 如果移动距离大于某个像素就滑动到上一张或者下一张


                //放大镜
                //先准备两张图片, 一张小图, 一张大图，并且两张图片有一个整数比值
                //在小图片的上方设置一个放大镜样式, 背景设为透明色即可
                //大图片外边套一个父元素, 超出父元素隐藏，大小为只能容纳你的放大部分即可
                //父元素与放大镜样式的比值 = 大图与小图的比值
                //在小图片上进行鼠标移动时获取鼠标的坐标，得到鼠标当前处于小图片上的坐标
                //根据对应的比例求出大图片的坐标并移动大图片令放大部分处于父元素可见范围


                //三级联动
                //在html中创建三个selet框 第一个与第二个添加onchange事件会在域的内容改变时发生。
                //为select设置onchange事件并调用函数，函数中的实参就是selectedIndex属性.selectedIndex  属性可设置或返回下拉列表中被选选项的索引号。
                //for循环遍历出一维数组里面的元素，然后将一维的数组里面的元素赋值给第一个下拉列表里面的option
                //然后再函数里面把二维数组[obj]的长度赋值给第二个下拉列表的长度然后利用for循环遍历出二维数组里面的元素，然后将二维的数组里面的元素赋值给第二个下拉列表里面的option 内容；
                //三级联动用到了上面的定义num空值，在二级联动change函数事件中把下标obj赋值给num
                //然后再利用for循环遍历出一二三维索引的三维数组中里面的元素赋值给第三个select下拉列表里面的option内容；


        </script>
  
</body>
</html>